﻿<div id="gridFields"></div>
<div id="dlgAddField" style="display:none;padding-left:60px;">
    <form id="formAddField"></form>
</div>
<div id="dlgUpdateField" style="display:none;padding-left:60px;">
    <form id="formUpdateField"></form>
</div>

<script type="text/javascript">
    var gridFields = null;
    var dlgAddField = null;
    var dlgUpdateField = null;
    var formAddField = null;
    var formUpdateField = null;
    var controlTypeData = [
        { value: 1, text: '文本框' },
        { value: 2, text: '多行文本框' },
        { value: 3, text: '日期控件' },
        { value: 4, text: '下拉框' },
        { value: 5, text: '整数输入框' },
        { value: 6, text: '浮点数输入框' },
        { value: 7, text: '隐藏控件' },
        { value: 8, text: '标签控件' },
        { value: 9, text: '日期时间控件' },
        { value: 10, text: '表格控件' },
        { value: 11, text: '文件上传控件' }
    ];
</script>

<script type="text/javascript">
    function addField() {
        var data = formAddField.getData();
        data.FormId = '@ViewBag.FormId';
        $.post('/API/Field/Create', data, function (data) {
            if (data.code == 0) {
                $.ligerDialog.success('添加成功', '提示');
                loadFields();
                dlgAddField.hide();
            } else {
                $.ligerDialog.error(data.msg, '错误');
            }
        }, 'json');
    }

    function showDlgAddField() {
        if (dlgAddField) {
            dlgAddField.show();
        }
        else {
            dlgAddField = $.ligerDialog.open({
                target: $('#dlgAddField'),
                width: 440,
                height: 250,
                title: '添加新字段',
                isResize: true,
                modal: true,
                buttons: [
                    {
                        text: '确定', onclick: function () {
                            if (formAddField.valid()) {

                                addField();
                            }
                            else {
                                formAddField.showInvalid();
                            }
                        }
                    },
                    {
                        text: '取消', onclick: function () {
                            dlgAddField.hide();
                        }
                    }
                ]
            });
        }
    }

    function initAddForm() {
        formAddField = $('#formAddField').ligerForm({
            inputWidth: 170, labelWidth: 90, space: 40,
            prefixID: 'formAdd',
            fields: [
                { display: '字段名称', name: 'FieldName', newline: true, type: 'text', validate: { required: true } },
                { display: '是否为空', name: 'Nullable', newline: true, type: 'checkbox' },
                {
                    display: '控件类型', name: 'ControlId', newline: true, type: 'select', validate: { required: true },
                    options: {
                        data: controlTypeData,
                        textField: 'text',
                        valueField: 'value'
                    }
                },
                {
                    display: '数据来源', name: 'Argument', newline: true, type: 'textarea'
                }
            ],
            validate: {}
        });
    }
</script>

<script type="text/javascript">
    function updateField() {
        $.post('/API/Field/Update', formUpdateField.getData(), function (data) {
            if (data.code == 0) {
                $.ligerDialog.success('修改成功', '提示');
                loadFields();
                dlgUpdateField.hide();
            } else {
                $.ligerDialog.error(data.msg, '错误');
            }
        }, 'json');
    }

    function showDlgUpdateField(row) {
        if (dlgUpdateField) {
            dlgUpdateField.show();
        }
        else {
            dlgUpdateField = $.ligerDialog.open({
                target: $('#dlgUpdateField'),
                width: 440,
                height: 250,
                title: '修改字段',
                isResize: true,
                modal: true,
                buttons: [
                    {
                        text: '确定', onclick: function () {
                            if (formUpdateField.valid()) {
                                updateField();
                            }
                            else {
                                formUpdateField.showInvalid();
                            }
                        }
                    },
                    {
                        text: '取消', onclick: function () {
                            dlgUpdateField.hide();
                        }
                    }
                ]
            });
        }

        formUpdateField.setData(row);
    }

    function initUpdateForm() {
        formUpdateField = $('#formUpdateField').ligerForm({
            inputWidth: 170, labelWidth: 90, space: 40,
            prefixID: 'formUpdate',
            fields: [
                { name: 'Id', type: 'hidden' },
                { name: 'FormId', type: 'hidden' },
                { display: '字段名称', name: 'FieldName', newline: true, type: 'text', validate: { required: true } },
                { display: '是否为空', name: 'Nullable', newline: true, type: 'checkbox' },
                {
                    display: '控件类型', name: 'ControlId', newline: true, type: 'select', validate: { required: true },
                    options: {
                        data: controlTypeData,
                        textField: 'text',
                        valueField: 'value'
                    }
                },
                {
                    display: '数据来源', name: 'Argument', newline: true, type: 'textarea'
                }
            ],
            validate: {}
        });
    }

    function deleteField(row) {
        $.post('/API/Field/Delete', { Id: row.Id, LoginName: row.LoginName },
            function (data) {
                if (data.code == 0) {
                    $.ligerDialog.success('删除成功', '提示');
                    loadFields();
                } else {
                    $.ligerDialog.error(data.msg, '错误');
                }
            }, 'json');
    }
</script>

<script type="text/javascript">
    function itemclick(item) {
        switch (item.method) {
            case 'add':
                showDlgAddField();
                break;

            case 'update':
                DoAction(gridFields, function (row) {
                    showDlgUpdateField(row);
                }, '请选择需要修改的字段');
                break;

            case 'delete':
                DoActionConfirm(gridFields, deleteField, '请选择需要修删除的字段', '是否要删除当前选择的字段？');
                break;

            case 'back':
                document.location.href = '/WF/Home/Forms';
                break;
        }
    }

    var toolbarFields = {
        items: [
            { method: 'back', text: '返回', click: itemclick, icon: 'back' },
            { line: true },
            { method: 'add', text: '增加', click: itemclick, icon: 'add' },
            { line: true },
            { method: 'update', text: '修改', click: itemclick, icon: 'modify' },
            { line: true },
            { method: 'delete', text: '删除', click: itemclick, icon: 'delete' }
        ]
    };

    var columnFields = [
        { display: '', name: 'Id', align: 'left', hide: true },
        { display: '字段名称', name: 'FieldName', align: 'left', width: 150, minwidth: 120 },
        { display: '是否为空', align: 'left', width: 150, minwidth: 120, render: formatNullable },
        { display: '控件类型', name: 'ControlType', align: 'left', width: 150, minwidth: 120 }
    ];

    function loadFields() {
        var complete = false;
        $.post('/API/Field/Query?id=@ViewBag.FormId', {}, function (data) {
            complete = true;
            gridFields.loadData(data);
            gridFields.gridloading.hide(100);
        }, 'json');

        var n = setInterval(function () {
            clearInterval(n);
            if (!complete) {
                gridFields.gridloading.show();
            }
        }, 100);
    }

    $(document).ready(function () {
        $.metadata.setType("attr", "validate");
        initAddForm();
        initUpdateForm();
        gridFields = $('#gridFields').ligerGrid({
            title: '字段信息',
            columns: columnFields,
            toolbar: toolbarFields,
            rownumbers: true,
            resizable: false,
            frozen: false,
            pageSize: 20,
            dataAction: 'local'
        });

        loadFields();
    });
</script>